<!-- 首页 -->
<template>
<div class="home">
<!-- 搜索框 -->
<van-search  shape='round' v-model="value" placeholder="请输入搜索关键词" />
<!-- 轮播图 -->
    <Swiper :bannerArr="bannerArr"></Swiper>
<!-- grid导航组件 -->
    <Grid :channelArr="channelArr"></Grid> 
<!-- 引入品牌组件 -->
    <Brand :picArr="brandList"></Brand>
<!--ProductList 产品列表 周一周四·新品首发 -->
    <ProductList :goodsList="newGoodsList" mytitle="周一周四·新品首发" />
<!-- 人气推荐 top组件 -->
    <Top :arr="hotGoodsList"></Top>
<!-- 专题 -->
    <Zhuanti :topicList="topicList" />  
<!-- 分类数据 -->
      <div v-for="item in categoryList" :key="item.id">
        <ProductList
          :goodsList="item.goodsList"
          :mytitle="item.name"
        ></ProductList>
        </div>
</div>
</template>
<script >
// 导入首页数据请求
import { getIndex } from "@/utils/https";
// 引入轮播图组件
import Swiper from "@/components/Swiper";
// 导入轮播组件
import Grid from "@/components/Home/Grid";
//导入brand品牌组件
import Brand from "@/components/Home/Brand";
// 导入 ProductList 产品列表
import ProductList from "@/components/ProductList";
// 人气推荐 top组件
import Top from "@/components/Home/Top";
//专题组件
import Zhuanti from "@/components/Home/Zhuanti";

export default {
data(){
return{
    value:"",//搜索数据
    bannerArr:[],//轮播图数组
    channelArr: [], // grid 数组
    brandList: [], // 品牌
    newGoodsList: [], //产品列表
    hotGoodsList: [], // 人气推荐
    topicList: [], // 专题
    categoryList: [], // 分类
};
},
 components: {
    Swiper,
    Grid,
    ProductList,
    Brand,
    Top,
    Zhuanti
  },
created(){
    getIndex().then((res)=>{
    // console.log(res);
    //轮播图数据
    this.bannerArr = res.data.data.banner;
    //grid 导航数据
    this.channelArr = res.data.data.channel;
    //品牌数据
    this.brandList = res.data.data.brandList;
    //产品列表
    this.newGoodsList = res.data.data.newGoodsList;
    //人气推荐
    this.hotGoodsList = res.data.data.hotGoodsList;
    //专题
    this.topicList = res.data.data.topicList;
    // 分类
    this.categoryList = res.data.data.categoryList;
    })
}};
</script>
<style lang='less' scoped>
/* @import url(); 引入css类 */
.home {
  width: 100%;
  height: 100%;
  padding-bottom: 50px;
  // box-sizing: border-box;
}
</style>